<template>
  <div>
    <el-card shadow="never" style="margin:30px">
      <el-steps v-if="formList.status !== 5" :active="formList.status+1" class="step">
        <el-step title="待付款" :description="formList.createTime" />
        <el-step title="待发货" :description="formList.status > 0 ? formList.paymentTime : ''" />
        <el-step title="已发货" :description="formList.status > 1 ? formList.modifyTime : ''" />
        <el-step v-if="formList.status !== 4" title="已完成" :description="formList.status > 2 ? formList.receiveTime : ''" />
        <el-step v-if="formList.status !== 3" title="退货" :description="formList.status > 3 ? formList.finishTime : ''" />
        <el-step title="已关闭" />
      </el-steps>

      <el-divider />
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <p class="title">订单信息:
            <button v-if="formList.status === 0" class="status" style="background-color:#f56c6c">待付款</button>
            <button v-if="formList.status === 1" class="status" style="background-color:#e6a23c">待发货</button>
            <button v-if="formList.status === 2" class="status" style="color: #409eff;background-color:#d9ecff">已发货</button>
            <button v-if="formList.status === 3" class="status" style="background-color:#409eff">已完成</button>
            <button v-if="formList.status === 4" class="status" type="primary" size="default">退货</button>
            <button v-if="formList.status === 5" class="status" style="background-color:#f4f4f5;color:#909399">无效订单</button>
          </p>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <p>订单金额: <span style="color:red">{{ formList.totalAmount | money }}</span></p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>订单编号: {{ formList.orderSn }} </p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>用户账号: {{ formList.memberUsername }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>备注: {{ formList.note }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <p>下单时间: {{ formList.createTime }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>付款时间: {{ formList.paymentTime }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>发货时间:{{ formList.deliveryTime }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>收货时间: {{ formList.receiveTime }}</p>
        </el-col>
      </el-row>
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <p class="title">收货人信息:</p>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <p>收货人: {{ formList.receiverName }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>用户姓名: {{ formList.memberUsername }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>手机号码: {{ formList.billReceiverPhone }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>邮政编码: {{ formList.receiverPostCode }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <p>地市: {{ formList.receiverRegion }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>详细地址: {{ formList.receiverDetailAddress }}</p>
        </el-col>
      </el-row>
      <el-divider />

      <p class="title">商品信息:</p>
      <el-table :data="listItem" border stripe>
        <el-table-column
          label="商品名称"
          width="180"
          fixed
          align="center"
        >
          <template slot-scope="scope">
            <p style="color:#E61A1A; font-size:14px">{{ scope.row.productName }}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="商品图片"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.productPic" style="width:100px;height:100px">
          </template>
        </el-table-column>
        <el-table-column
          label="是否退货"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.isReturn===0">否</p>
            <p v-if="scope.row.isReturn===1"><el-link type="warning" :underline="false" @click="backOrder(scope.row.returnId)">退货</el-link></p>
          </template>
        </el-table-column>
        <el-table-column
          label="品牌"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.productBrand }}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="价格"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.realAmount | money }}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="商品数量"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.productQuantity }}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="小计"
          width="150"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.totalPrice | money }}</p>
          </template>
        </el-table-column>
      </el-table>

      <el-divider />
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <p class="title">费用信息:</p>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom:30px">
        <el-col :span="6" :offset="0">
          <p>运费金额: <span style="color:red">{{ formList.freightAmount | money }}</span></p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>订单总金额: <span style="color:red">{{ formList.totalAmount | money }}</span></p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>实际金额: <span style="color:red">{{ formList.payAmount | money }}</span></p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>促销优化金额: <span style="color:red">{{ formList.promotionAmount | money }}</span></p>
        </el-col>
      </el-row>
      <el-form v-if="formList.status == 1" ref="forms" :model="sureList" :rules="rules" label-width="80px" :inline="false" size="small">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="物流公司" prop="deliveryCompany">
              <el-select v-model="sureList.deliveryCompany" placeholder="订单状态">
                <el-option
                  v-for="item in logisticsList"
                  :key="item.id"
                  :label="item.state"
                  :value="item.state"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="物流单号" prop="deliverySn">
              <el-input v-model.number="sureList.deliverySn" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button v-if="formList.status === 1" size="small" class="firstBtn" type="primary" @click="Confirm">确认发货</el-button>
      <div v-if="formList.status > 1 && formList.status !== 5">
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <p class="title">物流信息: <span style="color:#666">{{ formList.deliveryCompany }} [ {{ formList.deliverySn }} ]</span></p>
          </el-col>
        </el-row>
        <el-table :data="logisticsInfo" border stripe style="margin-bottom:30px">
          <el-table-column
            type="index"
            label="#"
            :width="70"
            align="center"
          />
          <el-table-column
            prop="time"
            label="时间"
            :width="200"
            align="center"
          />
          <el-table-column
            prop="info"
            label="运输状态信息"
            :width="390"
            align="center"
          />
          <el-table-column
            prop="note"
            label="备注"
            :width="210"
            align="center"
          />
        </el-table>

      </div>
      <el-button v-if="condition" size="small" class="firstBtn" type="primary" @click="forceOrder">强制确认收货</el-button>
      <el-button v-if="formList.status === 3" size="small" class="firstBtn" type="primary" @click="closeOrder">关闭订单</el-button>
    </el-card>

  </div>
</template>

<script>
import { orderDetail, sendDone, finishOrder, receiveProductsForce } from '@/api/order/orderDetail'
export default {
  data() {
    return {
      formList: {}, // 基本信息
      listItem: [], // 商品信息
      sureList: { // 点击确认发货传递都的参数
        orderId: ''
      },
      logisticsInfo: [
        {
          info: '深圳市横岗速递营销部已收件',
          time: '2015-03-06 21:16:58',
          note: '揽投员姓名：钟定基;联系电话：13883838888'
        },
        {
          info: '离开深圳市 发往广州市',
          time: '2015-03-07 14:25:00',
          note: ''
        },
        {
          info: '到达广东速递物流公司广航中心处理中心（经转）',
          time: '2015-03-08 00:17:00',
          note: ''
        },
        {
          info: '离开广州市 发往北京市（经转）',
          time: '2015-03-08 01:15:00',
          note: ''
        },
        {
          info: '到达北京黄村转运站处理中心（经转）',
          time: '2015-03-09 09:01:00',
          note: ''
        },
        {
          info: '离开北京市 发往呼和浩特市（经转）',
          time: '2015-03-09 18:39:00',
          note: ''
        },
        {
          info: '到达 呼和浩特市 处理中心',
          time: '2015-03-10 18:06:00',
          note: ''
        },
        {
          info: '呼和浩特市邮政速递物流分公司金川揽投部安排投递',
          time: '2015-03-11 09:53:48',
          note: '投递员姓名：安长虹;联系电话：18047140142'
        }
      ],
      logisticsList: [
        {
          state: '顺丰快递',
          id: 0
        },
        {
          state: '京东快递',
          id: 1
        },
        {
          state: '韵达快递',
          id: 2
        },
        {
          state: '中国邮政',
          id: 3
        },
        {
          state: '中通快递',
          id: 4
        },
        {
          state: '申通快递',
          id: 5
        }
      ],
      rules: {
        deliveryCompany: [
          { required: true, message: '请选择物流公司', trigger: 'blur' }
        ],
        deliverySn: [
          { required: true, message: '输入物流单号', trigger: 'blur' },
          { type: 'number', message: '物流单号必须为数字值', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    condition() {
      var blue = this.listItem.every(ele => ele.isReturn === 1)
      if (blue && this.formList.status === 2) {
        return true
      } else {
        return false
      }
    }
  },
  created() {
    this.init()
    this.sureList.orderId = this.$route.params.id
    // console.log(this.sureList.orderId)
  },
  mounted() {

  },
  methods: {
    forceOrder() { // 强制确认收货
      receiveProductsForce(this.sureList.orderId).then(res => {
        const { message: errMag, success } = res
        if (success) {
          this.$message.success('已强制确认收货!')
          this.init()
        } else {
          this.$message.error(errMag)
        }
      })
    },
    Confirm() {
      // this.sureList.deliverySn = Number(this.sureList.deliverySn)
      // console.log(this.sureList.deliverySn)
      this.$refs.forms.validate((valid) => {
        if (valid) {
          // console.log(valid)
          sendDone(this.sureList).then((res) => {
            const { message: errMag, success } = res
            if (success) {
              this.$message.success('确认发货成功')
              this.init()
              // 为了更新当前页面,可以采用重新加载页面
              // window.location.reload();
              // 或者重新获取订单状态
            } else {
              this.$message.error(errMag)
            }
          })
        } else {
          this.$message.error('请注意表单验证')
          return false
        }
      })
    },
    backOrder(id) {
      this.$router.push({ name: 'OrderBack', params: { id: id }})
    },
    closeOrder() { // 后台需要手动关闭订单,是商品进入历史订单和结算流程
      finishOrder(this.sureList.orderId).then(res => {
        const { message: errMag, success } = res
        if (success) {
          this.$message.success('订单已关闭')
          this.init()
        } else {
          this.$message.error(errMag)
        }
      })
    },
    init() {
      orderDetail(this.$route.params.id).then(res => {
        const { message: errMag, data, success } = res
        if (success) {
          const { orderDetail } = data
          this.formList = orderDetail.orderBase
          this.listItem = orderDetail.orderItems
          console.log(this.formList.status, this.listItem)
        } else {
          this.$message.error(errMag)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
   .step{
        width: 70%;
        margin: 0 auto;
        font-size: 16px;
        margin-bottom: 30px;
      }
        .firstBtn{
          width: 150px;
          margin: 0 auto;
          margin-top:30px;
          display: block;
      }
      p{
      line-height: 40px;
      font-size: 14px;
      margin: 3px 0;
      }
      .title{
        color: rgba(0,0,0,.85);
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 20px
      }
      .status{
        width: 60px;
        height: 30px;
        color:aliceblue;
        border: none;
        border-radius: 10%;
        font-size: 12px;
        font-family: YaHei;
        background-color: #888888;
    }
    ::v-deep .el-form-item__label{
        font-weight: 400;
    }
</style>
